<template>
  <form-item-wrapper
    :field="field"
    :class="[field.containerId ? 'cFieldDate' : 'fieldDate']"
  >
    <el-date-picker
      @change="handelChange"
      :disabled="field.disabled"
      v-model="field.answer"
      clearable
    />
  </form-item-wrapper>
</template>
<script lang="ts" setup>
import FormItemWrapper from "./form-item-wrapper.vue";
import { PropType } from "vue";
import QuestionType from "@bis/types/question";
import * as dayjs from "dayjs";

const props = defineProps({
  field: Object as PropType<QuestionType>,
  colIdx: Number,
});
const emits = defineEmits<{
  (e: "answerChange", field, colIdx): void;
}>();

const handelChange = () => {
  if (props.field.containerId) {
    props.field.answer = dayjs(props.field.answer).format("YYYY-MM-DD");
    emits("answerChange", props.field, props.colIdx);
  }
};
</script>

<style lang="scss" scoped>
.cFieldDate {
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    display: block;
    width: 100%;
  }
}
</style>
